<template>
	<view>
		<!-- <view class='header-wrap' :style="{height: headerHeight + 'px', paddingTop: statusBarHeight+ 'px'}">
			<view class="header-title">
				<view style="position: absolute;left: 32rpx;top: 64rpx;" @tap="goBack">
					<u-icon name="arrow-left" color="#FFFFFF" size="50" ></u-icon>
				</view>
				<view style="color: #FFFFFF;">个人信息</view>
			</view>
		</view> -->
		<!-- :style="{marginTop:headerHeight + statusBarHeight +'px'}" -->
		<view class="content" >
			<view class="content-table">
				<view style="display: flex;">
					<view style="text-align: center;height: 74rpx;line-height: 74rpx;width: 172rpx;">姓名:</view>
					<view style="text-align: center;height: 74rpx;line-height: 74rpx;width: 172rpx;">{{username}}</view>
					<view style="text-align: center;height: 74rpx;line-height: 74rpx;width: 172rpx;">工号:</view>
					<view style="text-align: center;height: 74rpx;line-height: 74rpx;width: 172rpx;">{{staffNo}}</view>
				</view>
				<view style="display: flex;">
					<view style="text-align: center;height: 74rpx;line-height: 74rpx;width: 172rpx;">职位:</view>
					<view style="text-align: center;height: 74rpx;line-height: 74rpx;width: 172rpx;">{{type}}</view>
					<view style="text-align: center;height: 74rpx;line-height: 74rpx;width: 172rpx;">职级:</view>
					<view style="text-align: center;height: 74rpx;line-height: 74rpx;width: 172rpx;">{{level}}</view>
				</view>
			</view>
			<view class="list1">
				<view class="title">部队</view>
				<view>
					<view class="uni-list-cell-db1" style="margin-bottom: 40rpx;">
						<picker @change="companyChange" :value="CompanyIndex" :range="Companys">
							<view class="evRight">
								<view class="uni-input test">{{ deptName?deptName:'请选择部队' }}</view>
								<u-icon name="arrow-right" color="#777777" size="28"></u-icon>
							</view>
						</picker>
					</view>
				</view>
			</view>
			<view style="height:360rpx;border-radius: 24rpx;margin-top: 26rpx;">
				<view class="gender">
					<view class="title">性别</view>
					<view>
						<view class="uni-list-cell-db1" style="margin-bottom: 40rpx;">
							<picker @change="genderChange" :value="genderIndex" :range="genderList">
								<view class="evRight">
									<view class="uni-input test">{{ genderData?genderData:'请选择性别' }}</view>
									<u-icon name="arrow-right" color="#777777" size="28"></u-icon>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="year">
					<view class="title">出生年份</view>
					<view>
						<view class="uni-list-cell-db1" style="margin-bottom: 40rpx;">
							<picker @change="yearChange" :value="birthday" :start="startDate" :end="endDate" :range="yearList" mode ='date' fields="year">
								<view class="evRight">
									<view class="uni-input test">{{ birthday?birthday.slice(0,4):'请选择出生年份' }}</view>
									<u-icon name="arrow-right" color="#777777" size="28"></u-icon>
								</view>
							</picker>
						</view>
					</view>
				</view>
				<view class="personalHeight">
					<view class="title">身高（cm）</view>
					<input class="personalH-input" type="number" v-model="personalH" placeholder="输入你的身高" @input="personalHInput"/>
				</view>
				<view class="personalHeight">
					<view class="title">体重（kg）</view>
					<input class="personalH-input" type="number" v-model="personalWeight" placeholder="输入你的体重" @input="WeightInput"/>
				</view>
			</view>
			<view class="size" style="border-radius: 24rpx;margin-top: 26rpx;">
				<view class="personalHeight">
					<view class="title">袖长（cm）</view>
					<input class="personalH-input" type="number" v-model="sleeveLength" placeholder="输入你的袖长" @input="sleeveInput"/>
				</view>
				<view class="personalHeight">
					<view class="title">肩宽（cm）</view>
					<input class="personalH-input" type="number" v-model="ShoulderWeight" placeholder="输入你的肩宽" @input="ShoulderInput"/>
				</view>
				<view class="personalHeight">
					<view class="title">裤长（cm）</view>
					<input class="personalH-input" type="number" v-model="pantsLength" placeholder="输入你的裤长" @input="pantsInput"/>
				</view>
				<view class="personalHeight">
					<view class="title">腰围（cm）</view>
					<input class="personalH-input" type="number" v-model="waistline" placeholder="输入你的腰围" @input="waistlineInput"/>
				</view>
				<view class="personalHeight">
					<view class="title">鞋/靴号</view>
					<input class="personalH-input" type="text" v-model="shoes" placeholder="输入你的鞋/靴号" @input="shoesInput"/>
				</view>
			</view>
			<view class="modify" @tap="modify" >提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:'',
				headerHeight:'',
				username:'',
				staffNo:'',
				type:'',
				level:'',
				CompanyIndex:'',
				Companys:[],
				genderIndex:0,
				genderList:['男','女'],
				yearDate:'',
				personalH:'',
				personalWeight:'',
				sleeveLength:'',
				ShoulderWeight:'',
				pantsLength:'',
				waistline:'',
				shoes:'',
				deptName:'',
				birthday:'',
				gender:0,
				genderData:'',
				airportId:'',
				avatar:'',
				createdBy:'',
				createdTime:'',
				delFlag:'',
				deptId:'',
				enabled:'',
				id:'',
				joinTime:'',
				memberId:'',
				phone:'',
				staffId:'',
				staffProfileId:'',
				toolingLabelId:'',
				toolingLabelName:'',
				updatedBy:'',
				updatedTime:'',
				isShow:false,
				startDate:'',
				endDate:''
				
			}
		},
		onLoad(options) {
			var that=this;
			if(options.name){
				that.isShow=true
			}else{
				that.isShow=false
			}
			console.log(options,'options>>>>>>>>')
			var personalData=JSON.parse(options.personalData);
			console.log(personalData)
			that.username=personalData.name;
			that.staffNo=personalData.staffNo;
			that.type=personalData.type;
			that.level=personalData.level;
			that.deptName=personalData.deptName;
			that.birthday=personalData.birthday;
			that.gender=personalData.gender;
			if(that.gender==1){
				that.genderData='男'
			}else{
				that.genderData='女'
			}
			that.personalH=personalData.height;
			that.personalWeight=personalData.weight;
			that.sleeveLength=personalData.sleeveLength;
			that.ShoulderWeight=personalData.shoulderWidth;
			that.pantsLength=personalData.pantsLength;
			that.waistline=personalData.waistline;
			that.shoes=personalData.shoeSize;
			that.airportId=personalData.airportId;
			that.avatar=personalData.avatar;
			that.createdBy=personalData.createdBy;
			that.createdTime=personalData.createdTime;
			that.delFlag=personalData.delFlag;
			that.deptId=personalData.deptId;
			that.enabled=personalData.enabled;
			that.id=personalData.id;
			that.joinTime=personalData.joinTime;
			that.memberId=personalData.memberId;
			that.phone=personalData.phone;
			that.staffId=personalData.staffId;
			that.staffProfileId=personalData.staffProfileId;
			that.toolingLabelId=personalData.toolingLabelId;
			that.toolingLabelName=personalData.toolingLabelName;
			that.updatedBy=personalData.updatedBy;
			that.updatedTime=personalData.updatedTime
			that.getcompanys();
			
		},
		onShow() {
			var date = new Date();
			this.startDate=date.getFullYear()-65;
			this.endDate=date.getFullYear()-18;
			uni.getSystemInfo({
				success: (res) => {
					const menuButton = uni.getMenuButtonBoundingClientRect()		// 胶囊
					const navBarPadding = (menuButton.top - res.statusBarHeight) * 2	
					this.statusBarHeight = res.statusBarHeight
					this.navHeight = menuButton.height + navBarPadding		
					this.headerHeight = this.navHeight + this.statusBarHeight
					console.log(this.headerHeight,'this.headerHeight>>>>>>>>>')
				}
			})
		},
		methods:{
			goBack(){
				uni.navigateBack();
			},
			getcompanys(){
				var that=this;
				that.sendRequest({
					url : "/dept/list",
					method : "GET",
					data : {
					},
					hideLoading : true,
					success:function (res) {
						console.log(res)
						that.list=res;
						for(let i in res){
							var gender=res[i].name
							console.log(gender)
							that.Companys.push(gender)	
						}
						that.CompanyIndex = that.Companys.findIndex(item=>{ // 根据当前项id获取当前项在数组中的索引
						   return item == that.deptName
						})
						that.deptName=that.Companys[that.CompanyIndex];
						console.log(that.deptName,'CompanyIndex>>>>>')
						console.log(that.Companys,'this.Companys12>>>>>')
					}
				})
			},
			//选择所在部队
			companyChange(e){
				console.log(e,'选择所在单位')
				this.CompanyIndex=e.target.value;
				this.deptId=this.list[e.target.value].id;
				this.deptName=this.list[e.target.value].name;
				console.log(this.deptId,'this.deptId》》》》》》')
				console.log(this.deptName,'deptName》》》》》》')
			},
			//选择性别
			genderChange(e){
				this.genderIndex=e.target.value;
				this.genderData=this.genderList[this.genderIndex];
				if(this.genderData=='男'){
					this.gender=1
				}else{
					this.gender=2
				}
				
			},
			//选择出生年份
			yearChange(e){
				this.birthday=e.target.value;
				console.log(this.birthday)
			},
			//身高
			personalHInput(e){
				this.personalH = e.detail.value;
			},
			//体重
			WeightInput(e){
				this.personalWeight = e.detail.value;
			},
			//袖长
			sleeveInput(e){
				this.sleeveLength = e.detail.value;
			},
			//肩宽
			ShoulderInput(e){
				this.ShoulderWeight = e.detail.value;
			},
			//裤长
			pantsInput(e){
				this.pantsLength = e.detail.value;
			},
			//腰围
			waistlineInput(e){
				this.waistline = e.detail.value;
			},
			//鞋/靴号
			shoesInput(e){
				this.shoes = e.detail.value;
			},
			//修改个人信息
			modify(){
				var that = this;
				var parmars={
					airportId:that.airportId,
					avatar: that.avatar,
					birthday: that.birthday,
					createdBy: that.createdBy,
					createdTime: that.createdTime,
					delFlag: that.delFlag,
					deptId: that.deptId,
					deptName: that.deptName,
					enabled: that.enabled,
					gender: that.gender,
					height: that.personalH,
					id: that.id,
					joinTime:that.joinTime,
					level: that.level,
					memberId:that.memberId,
					name: that.username,
					pantsLength: that.pantsLength,
					phone: that.phone,
					shoeSize: that.shoes,
					shoulderWidth: that.ShoulderWeight,
					sleeveLength: that.sleeveLength,
					staffId: that.staffId,
					staffNo:that.staffNo,
					staffProfileId: that.staffProfileId,
					toolingLabelId: that.toolingLabelId,
					toolingLabelName: that.toolingLabelName,
					type:that.type,
					updatedBy: that.updatedBy,
					updatedTime:that.updatedTime,
					waistline: that.waistline,
					weight: that.personalWeight
				}
				that.sendRequest({
					url :"/staff/profile",
					method : "PUT",
					data :parmars,
					hideLoading : true,
					success:function (res) {
						console.log(res,'修改个人信息')
						if(res.result=="用户信息修改成功"){
							uni.showToast({
							    title: '用户信息修改成功',
							    duration: 2000
							});
							uni.navigateBack()
						}else{
							uni.showToast({
							    title: '用户信息修改失败',
							    duration: 2000
							});
						}
						// that.personalData=res;
						// that.username=res.name;
						// that.deptName=res.deptName;
					},
				})
				
			},
		}
	}
</script>

<style>
	.container{
		width:100%;
		height: 100%;
		position: absolute;
	}
	.header-wrap{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(130deg, #4EBFF9 0%, #266CBE 100%);
		
	}
	.header-title{
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 800;
		line-height: 50rpx;
		color: #FFFFFF;
	}
	.content{
		padding: 32rpx;
	}
	.content-table{
		background: #FFFFFF;
		opacity: 1;
		border-radius: 24rpx;
	}
	.list1{
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		justify-content: space-between;
		border-radius: 24rpx;
		line-height: 90rpx;
		background: #ffffff;
		margin-top: 26rpx;
		padding: 0 32rpx;
	}
	.title{
		height: 90rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 90rpx;
		color: #838583;
		text-align: center;
	}
	.uni-list-cell-db1 {
		height: 90rpx;
		line-height: 90rpx;
		opacity: 1;
		
	}
	.evRight{
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 90rpx;
		align-items: center;
	}
	.gender{
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		line-height: 90rpx;
		background: #ffffff;
		padding: 0 32rpx;
		border: 1px solid #E5E9E5;
	}
	.year{
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		line-height: 90rpx;
		background: #ffffff;
		padding: 0 32rpx;
		border: 1px solid #E5E9E5;
	}
	.personalHeight{
		display: flex;
		justify-content: space-between;
		height: 90rpx;
		line-height: 90rpx;
		background: #ffffff;
		padding: 0 32rpx;
		border: 1px solid #E5E9E5;
	}
	.personalH-input{
		height: 90rpx;
		line-height: 90rpx;
		text-align: right;
	}
	.modify{
		margin: 32rpx;
		height: 88rpx;
		border: 2rpx solid #4EBFF9;
		opacity: 1;
		border-radius: 44rpx;
		color: #4EBFF9;
		line-height: 88rpx;
		text-align: center;
		font-size: 36rpx;
	}
</style>
